<template>
  <div class="problem-detail-page">
    <!-- 顶部导航栏 -->
    <div class="top-navbar">
      <div class="navbar-container">
        <button class="back-btn" @click="goBack">
          <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
            <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/>
          </svg>
          返回题库
        </button>
        
        <div class="problem-title-bar">
          <span class="problem-number">{{ problem?.id }}.</span>
          <span class="problem-name">{{ problem?.title }}</span>
          <span 
            class="difficulty-badge"
            :class="problem?.difficulty"
          >
            {{ getDifficultyText(problem?.difficulty) }}
          </span>
        </div>
        
        <div class="action-buttons">
          <!-- 管理员编辑按钮 -->
          <button 
            v-if="userStore.isAdmin" 
            class="edit-btn" 
            @click="goToEdit"
            title="编辑题目"
          >
            <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
              <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/>
            </svg>
            编辑
          </button>
          
          <button 
            class="favorite-btn" 
            @click="handleFavorite" 
            :disabled="favoriting"
            :class="{ favorited: isFavorited }"
          >
            <svg viewBox="0 0 24 24" width="20" height="20" :fill="isFavorited ? 'currentColor' : 'none'" stroke="currentColor" stroke-width="2">
              <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
            </svg>
            {{ isFavorited ? '已收藏' : '收藏' }}
          </button>
          <button class="submit-btn" @click="handleSubmit" :disabled="submitting">
            {{ submitting ? '提交中...' : '提交答案' }}
          </button>
        </div>
      </div>
    </div>

    <!-- 主内容区 -->
    <div class="main-content">
      <div class="content-container">
        <!-- 左侧题目描述 -->
        <div class="problem-content">
          <div v-if="loading" class="loading">
            <svg viewBox="0 0 24 24" width="40" height="40" fill="currentColor" class="spin">
              <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-3.31 0-6 2.69-6 6h2c0-2.21 1.79-4 4-4V6z"/>
            </svg>
            <p>加载中...</p>
          </div>
          
          <div v-else-if="problem" class="problem-detail">
            <!-- 题目描述 -->
            <div class="section">
              <h3>📝 题目描述</h3>
              <div class="content-text" v-html="renderedDescription"></div>
            </div>

            <!-- 输入说明 -->
            <div v-if="problem.inputDescription" class="section">
              <h3>📥 输入说明</h3>
              <div class="content-text">{{ problem.inputDescription }}</div>
            </div>

            <!-- 输出说明 -->
            <div v-if="problem.outputDescription" class="section">
              <h3>📤 输出说明</h3>
              <div class="content-text">{{ problem.outputDescription }}</div>
            </div>

            <!-- 示例 -->
            <div v-if="problem.examples && problem.examples.length > 0" class="section">
              <h3>💡 示例</h3>
              <div 
                v-for="(example, index) in problem.examples" 
                :key="index"
                class="example-block"
              >
                <div class="example-title">示例 {{ index + 1 }}</div>
                <div class="example-content">
                  <div class="example-item">
                    <div class="label">输入：</div>
                    <div class="value">{{ example.input }}</div>
                  </div>
                  <div class="example-item">
                    <div class="label">输出：</div>
                    <div class="value">{{ example.output }}</div>
                  </div>
                  <div v-if="example.explanation" class="example-item">
                    <div class="label">说明：</div>
                    <div class="value">{{ example.explanation }}</div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 提示 -->
            <div v-if="problem.hints && problem.hints.length > 0" class="section">
              <h3>💭 提示</h3>
              <ul class="hints-list">
                <li v-for="(hint, index) in problem.hints" :key="index">{{ hint }}</li>
              </ul>
            </div>

            <!-- 标签 -->
            <div v-if="problem.tags && problem.tags.length > 0" class="section">
              <h3>🏷️ 标签</h3>
              <div class="tags-list">
                <span v-for="tag in problem.tags" :key="tag" class="tag">{{ tag }}</span>
              </div>
            </div>

            <!-- 统计信息 -->
            <div class="stats-section">
              <div class="stat-item">
                <span class="stat-label">通过率</span>
                <span class="stat-value">{{ problem.acceptanceRate }}%</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">提交次数</span>
                <span class="stat-value">{{ problem.submitCount }}</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">通过次数</span>
                <span class="stat-value">{{ problem.acceptedCount }}</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 右侧答题区域 -->
        <div class="answer-panel">
          <div class="panel-header">
            <div class="tabs">
              <button 
                :class="{ active: activeTab === 'answer' }"
                @click="activeTab = 'answer'"
              >
                💡 作答
              </button>
              <button 
                :class="{ active: activeTab === 'result' }"
                @click="activeTab = 'result'"
              >
                📊 结果
              </button>
              <button 
                :class="{ active: activeTab === 'solution' }"
                @click="activeTab = 'solution'"
              >
                📖 题解
              </button>
            </div>
          </div>

          <div class="panel-body">
            <!-- 作答区域 -->
            <div v-if="activeTab === 'answer'" class="answer-area">
              <div v-if="problem?.type === 'choice'" class="choice-answer">
                <h4>选择答案</h4>
                <div class="options-list">
                  <label 
                    v-for="option in problem.options" 
                    :key="option.key"
                    class="option-item"
                    :class="{ selected: userAnswer === option.key }"
                  >
                    <input 
                      type="radio" 
                      :value="option.key"
                      v-model="userAnswer"
                    />
                    <span class="option-key">{{ option.key }}.</span>
                    <span class="option-text">{{ option.text }}</span>
                  </label>
                </div>
              </div>

              <div v-else-if="problem?.type === 'fill'" class="fill-answer">
                <h4>填写答案</h4>
                <div class="answer-input-wrapper">
                  <textarea 
                    v-model="userAnswer"
                    placeholder="请输入你的答案..."
                    rows="8"
                    class="answer-textarea"
                  ></textarea>
                  <button class="math-editor-btn" @click="showMathEditor = true" title="打开公式编辑器">
                    <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
                      <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/>
                    </svg>
                    公式编辑器
                  </button>
                </div>
                <div v-if="userAnswer" class="answer-preview">
                  <div class="preview-label">预览：</div>
                  <div class="preview-content" v-html="renderMathInHTML(userAnswer)"></div>
                </div>
                <div class="answer-tips">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
                    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
                  </svg>
                  <span>可以直接输入数字，或点击"公式编辑器"按钮插入数学公式</span>
                </div>
              </div>

              <div v-else class="calculation-answer">
                <h4>计算过程</h4>
                <div class="answer-input-wrapper">
                  <textarea 
                    v-model="userProcess"
                    placeholder="请写出详细的计算过程..."
                    rows="12"
                    class="process-textarea"
                  ></textarea>
                  <button class="math-editor-btn" @click="editingProcess = true; showMathEditor = true" title="打开公式编辑器">
                    <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
                      <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/>
                    </svg>
                    公式编辑器
                  </button>
                </div>
                <div v-if="userProcess" class="answer-preview">
                  <div class="preview-label">过程预览：</div>
                  <div class="preview-content" v-html="renderMathInHTML(userProcess)"></div>
                </div>
                
                <h4 style="margin-top: 20px;">最终答案</h4>
                <div class="answer-input-wrapper">
                  <input 
                    v-model="userAnswer"
                    type="text"
                    placeholder="请输入最终答案..."
                    class="answer-input"
                  />
                  <button class="math-editor-btn compact" @click="editingProcess = false; showMathEditor = true" title="打开公式编辑器">
                    <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
                      <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/>
                    </svg>
                    公式
                  </button>
                </div>
                <div v-if="userAnswer" class="answer-preview compact">
                  <div class="preview-label">答案预览：</div>
                  <div class="preview-content" v-html="renderMathInHTML(userAnswer)"></div>
                </div>
              </div>
            </div>

            <!-- 结果区域 -->
            <div v-else-if="activeTab === 'result'" class="result-area">
              <div v-if="!submitResult" class="no-result">
                <svg viewBox="0 0 24 24" width="64" height="64" fill="currentColor" opacity="0.3">
                  <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
                </svg>
                <p>暂无提交结果</p>
                <span>提交答案后查看结果</span>
              </div>

              <div v-else class="result-content">
                <div 
                  class="result-status"
                  :class="submitResult.status"
                >
                  <svg v-if="submitResult.status === 'accepted'" viewBox="0 0 24 24" width="48" height="48" fill="currentColor">
                    <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
                  </svg>
                  <svg v-else viewBox="0 0 24 24" width="48" height="48" fill="currentColor">
                    <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
                  </svg>
                  <span class="status-text">{{ getStatusText(submitResult.status) }}</span>
                </div>

                <div class="result-details">
                  <div class="detail-item">
                    <span class="detail-label">得分</span>
                    <span class="detail-value">{{ submitResult.score }} / 100</span>
                  </div>
                  <div class="detail-item">
                    <span class="detail-label">提交时间</span>
                    <span class="detail-value">{{ formatTime(submitResult.submitTime) }}</span>
                  </div>
                </div>

                <div class="user-answer">
                  <h4>📝 你的答案</h4>
                  <div class="answer-box" v-html="renderMathInHTML(submitResult.userAnswer || userAnswer)"></div>
                </div>

                <div v-if="submitResult.feedback" class="feedback">
                  <h4>💬 反馈</h4>
                  <p>{{ submitResult.feedback }}</p>
                </div>

                <div v-if="submitResult.status !== 'accepted'" class="correct-answer">
                  <h4>✅ 正确答案</h4>
                  <div class="answer-box" v-html="renderMathInHTML(submitResult.correctAnswer)"></div>
                </div>
              </div>
            </div>

            <!-- 题解区域 -->
            <div v-else-if="activeTab === 'solution'" class="solution-area">
              <div v-if="loadingSolution" class="loading">
                <svg viewBox="0 0 24 24" width="40" height="40" fill="currentColor" class="spin">
                  <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-3.31 0-6 2.69-6 6h2c0-2.21 1.79-4 4-4V6z"/>
                </svg>
                <p>加载题解中...</p>
              </div>

              <div v-else-if="!solution" class="no-solution">
                <svg viewBox="0 0 24 24" width="64" height="64" fill="currentColor" opacity="0.3">
                  <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
                </svg>
                <p>暂无题解</p>
                <span>请先通过题目后查看题解</span>
              </div>

              <div v-else class="solution-content">
                <h4>📖 解题思路</h4>
                <div class="solution-text" v-html="renderedSolution"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 数学公式编辑器 -->
    <MathEditor 
      v-if="showMathEditor"
      @close="showMathEditor = false"
      @insert="handleInsertFormula"
    />
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useUserStore } from '../stores/user'
import { getProblemDetail, submitAnswer, getProblemSolution, favoriteProblem } from '../api/problem'
import { toast } from '../utils/toast'
import { renderMathInHTML } from '../utils/renderMath'
import MathEditor from '../components/MathEditor.vue'

const route = useRoute()
const router = useRouter()
const userStore = useUserStore()

const problem = ref(null)
const loading = ref(false)
const activeTab = ref('answer')

const userAnswer = ref('')
const userProcess = ref('')
const submitting = ref(false)
const submitResult = ref(null)

const solution = ref(null)
const loadingSolution = ref(false)
const isFavorited = ref(false)
const favoriting = ref(false)

// 数学公式编辑器
const showMathEditor = ref(false)
const editingProcess = ref(false) // true: 编辑过程，false: 编辑答案

// 渲染LaTeX公式
const renderedDescription = computed(() => {
  if (!problem.value?.description) return ''
  return renderMathInHTML(problem.value.description)
})

const renderedSolution = computed(() => {
  if (!solution.value) return ''
  return renderMathInHTML(solution.value)
})

onMounted(() => {
  loadProblem()
})

// 监听activeTab变化，切换到题解时加载题解
watch(activeTab, (newTab) => {
  if (newTab === 'solution' && !solution.value && problem.value) {
    loadSolution()
  }
})

async function loadProblem() {
  loading.value = true
  try {
    const res = await getProblemDetail(route.params.id)
    console.log('题目详情响应:', res)
    if (res.code === 200) {
      problem.value = res.data
      // 如果题目详情中已经包含题解，直接使用
      if (res.data.solution) {
        solution.value = res.data.solution
      }
    }
  } catch (error) {
    console.error('加载题目失败:', error)
    // 使用模拟数据
    setMockProblem()
  } finally {
    loading.value = false
  }
}

function setMockProblem() {
  problem.value = {
    id: 1,
    title: '求函数的极限',
    difficulty: 'medium',
    type: 'fill',
    description: '<p>求下列函数的极限：</p><p>$$\\lim_{x \\to 0} \\frac{\\sin x}{x}$$</p>',
    inputDescription: '无需输入',
    outputDescription: '输出极限值',
    examples: [
      {
        input: 'x → 0',
        output: '1',
        explanation: '这是一个重要极限'
      }
    ],
    hints: [
      '这是第一个重要极限',
      '可以使用洛必达法则求解'
    ],
    tags: ['极限', '重要极限', '洛必达法则'],
    acceptanceRate: 65.5,
    submitCount: 1520,
    acceptedCount: 996,
    solution: '<p><strong>解法一：利用重要极限</strong></p><p>$$\\lim_{x \\to 0} \\frac{\\sin x}{x} = 1$$</p><p>这是第一个重要极限，需要记住。</p>'
  }
}

// 测试用的模拟提交结果
function setMockSubmitResult() {
  submitResult.value = {
    id: 12345,
    status: 'accepted',
    score: 100,
    correctAnswer: '1',
    feedback: '回答正确！第一个重要极限掌握得很好。',
    submitTime: '2025-10-27T15:30:00'
  }
}

async function loadSolution() {
  loadingSolution.value = true
  try {
    const res = await getProblemSolution(problem.value.id)
    console.log('题解响应:', res)
    if (res.code === 200 && res.data) {
      solution.value = res.data.solution
    }
  } catch (error) {
    console.error('加载题解失败:', error)
    // 如果是权限错误，不显示toast，让用户知道需要先通过题目
    if (error.message && error.message.includes('通过题目')) {
      console.log('需要先通过题目才能查看题解')
    } else {
      toast.error(error.message || '加载题解失败')
    }
  } finally {
    loadingSolution.value = false
  }
}

async function handleFavorite() {
  if (favoriting.value) return
  
  favoriting.value = true
  try {
    const res = await favoriteProblem(problem.value.id)
    if (res.code === 200 && res.data) {
      isFavorited.value = res.data.isFavorited
      toast.success(isFavorited.value ? '收藏成功' : '取消收藏')
    }
  } catch (error) {
    console.error('收藏操作失败:', error)
    toast.error('收藏操作失败')
  } finally {
    favoriting.value = false
  }
}

function handleInsertFormula(formula) {
  // 将公式用$$包裹
  const formulaStr = `$$${formula}$$`
  
  if (editingProcess.value) {
    // 插入到过程
    userProcess.value += (userProcess.value ? '\n' : '') + formulaStr
  } else {
    // 插入到答案
    userAnswer.value += (userAnswer.value ? ' ' : '') + formulaStr
  }
  
  showMathEditor.value = false
}

async function handleSubmit() {
  if (!userAnswer.value.trim()) {
    toast.warning('请输入答案！')
    return
  }

  // 计算题必须填写过程
  if (problem.value.type === 'calculation' && !userProcess.value.trim()) {
    toast.warning('计算题需要填写解题过程！')
    return
  }

  submitting.value = true
  try {
    const res = await submitAnswer({
      problemId: problem.value.id,
      answer: userAnswer.value,
      process: userProcess.value || undefined
    })

    console.log('完整响应:', res)
    console.log('响应码:', res.code)
    console.log('响应数据:', res.data)

    if (res.code === 200) {
      // 确保数据结构正确
      const resultData = res.data || {}
      console.log('处理后的数据:', resultData)
      
      submitResult.value = {
        id: resultData.id || Date.now(),
        status: resultData.status || 'unknown',
        score: resultData.score || 0,
        // 从题目详情中获取正确答案
        correctAnswer: problem.value?.correctAnswer || problem.value?.correct_answer || '',
        feedback: resultData.feedback || '',
        // 处理下划线命名转驼峰命名
        submitTime: resultData.submit_time || new Date().toISOString(),
        // 保存后端返回的用户答案
        userAnswer: resultData.answer || userAnswer.value,
        userProcess: resultData.process || userProcess.value
      }
      
      console.log('设置的submitResult:', submitResult.value)
      activeTab.value = 'result'
      
      if (resultData.status === 'accepted') {
        toast.success('恭喜你，答案正确！')
        // 如果答案正确，自动加载题解
        if (!solution.value) {
          loadSolution()
        }
      } else if (resultData.status === 'partial') {
        toast.warning('部分正确，得分：' + resultData.score)
      } else {
        toast.error('答案错误，请重试')
      }
    } else {
      console.error('提交失败，响应码:', res.code)
      toast.error('提交失败，请重试')
    }
  } catch (error) {
    console.error('提交失败:', error)
    toast.error(error.message || '提交失败，请重试')
  } finally {
    submitting.value = false
  }
}

function goBack() {
  router.push('/problems')
}

function goToEdit() {
  router.push(`/problem/${route.params.id}/edit`)
}

function getDifficultyText(difficulty) {
  const map = {
    easy: '简单',
    medium: '中等',
    hard: '困难'
  }
  return map[difficulty] || difficulty
}

function getStatusText(status) {
  const map = {
    accepted: '答案正确',
    wrong_answer: '答案错误',
    partial: '部分正确'
  }
  return map[status] || status
}

function formatTime(timeStr) {
  if (!timeStr) return ''
  const date = new Date(timeStr)
  return date.toLocaleString('zh-CN')
}
</script>

<style scoped lang="scss">
.problem-detail-page {
  min-height: 100vh;
  background: #f8f9fa;
}

.top-navbar {
  background: white;
  border-bottom: 1px solid #e1e4e8;
  position: sticky;
  top: 0;
  z-index: 100;
  
  .navbar-container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 24px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
  }
  
  .back-btn {
    padding: 8px 16px;
    background: white;
    border: 1px solid #d0d7de;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
    
    &:hover {
      background: #f6f8fa;
      border-color: #c1c7cd;
    }
  }
  
  .problem-title-bar {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    
    .problem-number {
      font-size: 16px;
      color: #57606a;
      font-weight: 500;
    }
    
    .problem-name {
      font-size: 16px;
      color: #24292f;
      font-weight: 600;
    }
    
    .difficulty-badge {
      padding: 4px 12px;
      border-radius: 12px;
      font-size: 12px;
      font-weight: 500;
      
      &.easy {
        background: #f0f9ff;
        color: #0969da;
      }
      
      &.medium {
        background: #fff8e5;
        color: #d97706;
      }
      
      &.hard {
        background: #ffebe9;
        color: #cf222e;
      }
    }
  }
  
  .action-buttons {
    display: flex;
    gap: 12px;
  }
  
  .edit-btn {
    padding: 10px 20px;
    background: white;
    color: #667eea;
    border: 1px solid #667eea;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
    
    &:hover {
      background: #667eea;
      color: white;
    }
  }
  
  .favorite-btn {
    padding: 10px 20px;
    background: white;
    color: #57606a;
    border: 1px solid #d0d7de;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
    
    svg {
      transition: all 0.2s;
    }
    
    &:hover:not(:disabled) {
      background: #f6f8fa;
      border-color: #c1c7cd;
    }
    
    &.favorited {
      color: #cf222e;
      border-color: #cf222e;
      background: #ffebe9;
      
      &:hover:not(:disabled) {
        background: #ffd8d3;
      }
    }
    
    &:disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }
  }
  
  .submit-btn {
    padding: 10px 24px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    
    &:hover:not(:disabled) {
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }
    
    &:disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }
  }
}

.main-content {
  max-width: 1600px;
  margin: 0 auto;
  padding: 24px;
  
  .content-container {
    display: grid;
    grid-template-columns: 1fr 500px;
    gap: 24px;
    align-items: start;
  }
}

.problem-content {
  background: white;
  border-radius: 8px;
  padding: 24px;
  
  .loading {
    padding: 60px 20px;
    text-align: center;
    
    svg {
      animation: spin 1s linear infinite;
      color: #667eea;
      margin-bottom: 16px;
    }
    
    p {
      color: #8c959f;
      font-size: 14px;
      margin: 0;
    }
  }
  
  .section {
    margin-bottom: 32px;
    
    h3 {
      font-size: 16px;
      color: #24292f;
      margin: 0 0 16px 0;
      font-weight: 600;
    }
    
    .content-text {
      font-size: 15px;
      line-height: 1.8;
      color: #24292f;
    }
    
    .example-block {
      background: #f6f8fa;
      border-radius: 6px;
      padding: 16px;
      margin-bottom: 12px;
      
      .example-title {
        font-size: 13px;
        color: #57606a;
        font-weight: 500;
        margin-bottom: 12px;
      }
      
      .example-content {
        .example-item {
          margin-bottom: 8px;
          display: flex;
          gap: 8px;
          
          &:last-child {
            margin-bottom: 0;
          }
          
          .label {
            font-weight: 500;
            color: #24292f;
            min-width: 50px;
          }
          
          .value {
            color: #57606a;
            flex: 1;
            font-family: 'Courier New', monospace;
          }
        }
      }
    }
    
    .hints-list {
      margin: 0;
      padding-left: 24px;
      
      li {
        margin-bottom: 8px;
        color: #57606a;
        line-height: 1.6;
      }
    }
    
    .tags-list {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      
      .tag {
        padding: 4px 12px;
        background: #f6f8fa;
        color: #57606a;
        border-radius: 12px;
        font-size: 12px;
      }
    }
  }
  
  .stats-section {
    display: flex;
    gap: 24px;
    padding-top: 20px;
    border-top: 1px solid #e1e4e8;
    
    .stat-item {
      display: flex;
      flex-direction: column;
      gap: 4px;
      
      .stat-label {
        font-size: 12px;
        color: #57606a;
      }
      
      .stat-value {
        font-size: 16px;
        font-weight: 600;
        color: #667eea;
      }
    }
  }
}

.answer-panel {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  position: sticky;
  top: 84px;
  
  .panel-header {
    border-bottom: 1px solid #e1e4e8;
    
    .tabs {
      display: flex;
      
      button {
        flex: 1;
        padding: 14px;
        background: transparent;
        border: none;
        border-bottom: 2px solid transparent;
        font-size: 14px;
        color: #57606a;
        cursor: pointer;
        transition: all 0.2s;
        
        &:hover {
          color: #24292f;
          background: #f6f8fa;
        }
        
        &.active {
          color: #667eea;
          border-bottom-color: #667eea;
          font-weight: 500;
        }
      }
    }
  }
  
  .panel-body {
    padding: 24px;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    
    h4 {
      font-size: 14px;
      color: #24292f;
      margin: 0 0 12px 0;
    }
    
    .choice-answer {
      .options-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
        
        .option-item {
          display: flex;
          align-items: start;
          gap: 12px;
          padding: 14px;
          border: 2px solid #d0d7de;
          border-radius: 6px;
          cursor: pointer;
          transition: all 0.2s;
          
          &:hover {
            border-color: #c1c7cd;
            background: #f6f8fa;
          }
          
          &.selected {
            border-color: #667eea;
            background: #f0f6ff;
          }
          
          input[type="radio"] {
            margin-top: 2px;
            cursor: pointer;
          }
          
          .option-key {
            font-weight: 500;
            color: #24292f;
          }
          
          .option-text {
            flex: 1;
            color: #24292f;
            line-height: 1.6;
          }
        }
      }
    }
    
    .fill-answer,
    .calculation-answer {
      .answer-input-wrapper {
        position: relative;
        margin-bottom: 16px;
      }
      
      .answer-textarea,
      .process-textarea {
        width: 100%;
        padding: 12px;
        border: 1px solid #d0d7de;
        border-radius: 6px;
        font-size: 14px;
        font-family: 'Courier New', monospace;
        resize: vertical;
        outline: none;
        
        &:focus {
          border-color: #667eea;
          box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }
      }
      
      .answer-input {
        width: 100%;
        padding: 10px 12px;
        border: 1px solid #d0d7de;
        border-radius: 6px;
        font-size: 14px;
        outline: none;
        
        &:focus {
          border-color: #667eea;
          box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }
      }
      
      .math-editor-btn {
        position: absolute;
        top: 8px;
        right: 8px;
        padding: 6px 12px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border: none;
        border-radius: 6px;
        font-size: 13px;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 6px;
        transition: all 0.2s;
        box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
        
        &:hover {
          transform: translateY(-1px);
          box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
        }
        
        &.compact {
          padding: 4px 10px;
          font-size: 12px;
        }
        
        svg {
          flex-shrink: 0;
        }
      }
      
      .answer-preview {
        padding: 12px 16px;
        background: #f6f8fa;
        border: 1px solid #d0d7de;
        border-radius: 6px;
        margin-bottom: 12px;
        
        &.compact {
          padding: 8px 12px;
          margin-bottom: 8px;
        }
        
        .preview-label {
          font-size: 12px;
          color: #57606a;
          margin-bottom: 8px;
          font-weight: 500;
        }
        
        .preview-content {
          font-size: 15px;
          color: #24292f;
          min-height: 30px;
          word-break: break-word;
        }
      }
      
      .answer-tips {
        margin-top: 8px;
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 12px;
        color: #57606a;
        
        svg {
          flex-shrink: 0;
        }
      }
    }
    
    .loading {
      text-align: center;
      padding: 60px 20px;
      color: #8c959f;
      
      svg {
        animation: spin 1s linear infinite;
        color: #667eea;
        margin-bottom: 16px;
      }
      
      p {
        font-size: 14px;
        margin: 0;
      }
    }
    
    .no-result,
    .no-solution {
      text-align: center;
      padding: 60px 20px;
      color: #8c959f;
      
      svg {
        margin-bottom: 16px;
      }
      
      p {
        font-size: 16px;
        margin: 0 0 8px 0;
      }
      
      span {
        font-size: 13px;
      }
    }
    
    .result-content {
      .result-status {
        text-align: center;
        padding: 24px;
        border-radius: 8px;
        margin-bottom: 24px;
        
        &.accepted {
          background: #f6ffed;
          border: 1px solid #b7eb8f;
          color: #52c41a;
        }
        
        &.wrong_answer {
          background: #fff2f0;
          border: 1px solid #ffccc7;
          color: #ff4d4f;
        }
        
        svg {
          margin-bottom: 12px;
        }
        
        .status-text {
          display: block;
          font-size: 18px;
          font-weight: 600;
        }
      }
      
      .result-details {
        display: flex;
        gap: 24px;
        padding: 16px;
        background: #f6f8fa;
        border-radius: 6px;
        margin-bottom: 20px;
        
        .detail-item {
          flex: 1;
          display: flex;
          flex-direction: column;
          gap: 4px;
          
          .detail-label {
            font-size: 12px;
            color: #57606a;
          }
          
          .detail-value {
            font-size: 15px;
            font-weight: 500;
            color: #24292f;
          }
        }
      }
      
      .user-answer,
      .feedback,
      .correct-answer {
        h4 {
          font-size: 14px;
          color: #24292f;
          margin: 0 0 12px 0;
        }
        
        p {
          color: #57606a;
          line-height: 1.6;
          margin: 0;
        }
        
        .answer-box {
          padding: 12px;
          background: #f6f8fa;
          border-radius: 6px;
          font-family: 'Courier New', monospace;
          color: #24292f;
          word-break: break-word;
        }
      }
      
      .user-answer {
        margin-bottom: 20px;
        
        .answer-box {
          background: #f0f6ff;
          border: 1px solid #d0d7de;
          font-size: 15px;
        }
      }
      
      .feedback {
        margin-bottom: 20px;
      }
    }
    
    .solution-content {
      h4 {
        font-size: 16px;
        color: #24292f;
        margin: 0 0 16px 0;
      }
      
      .solution-text {
        font-size: 15px;
        line-height: 1.8;
        color: #24292f;
      }
    }
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

// 数学公式样式
:deep(.math-display) {
  display: block;
  margin: 20px 0;
  text-align: center;
  overflow-x: auto;
  
  .katex-display {
    margin: 0;
  }
}

:deep(.math-inline) {
  display: inline;
  
  .katex {
    font-size: 1.05em;
  }
}

:deep(.math-error) {
  color: #cf222e;
  background: #ffebe9;
  padding: 4px 8px;
  border-radius: 4px;
  font-family: monospace;
}

// 内容图片样式
:deep(.content-image) {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 16px auto;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
</style>

